<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" color="#156DAC" @clickLeft="pageback">
			<view class="header-icon-text-panel">
				<text class="title">{{title}}</text>
				<view style="margin-left: 10upx;" @click="showDrawer">
					<uni-icons type="search" size="16" color="#156DAC"></uni-icons>
				</view>
			</view>
		</uni-nav-bar>
		<view class="content padding">
			<view class="page-content-list">
				<block v-for="(value, index) in listData" :key="index">
					<view class="content-list-cell">
						<view class="order-item">
							<view class="order-item-content">
								<view class="order-content-row">
									<view class="label">时间</view>
									<view class="value" style="color: #299AEB;">{{parseTime(value.realTime,'{y}-{m}-{d} {h}:{i}:{s}')}}</view>
								</view>
								<template v-if="dataFlag === 1">
									<view class="order-content-row">
										<view class="label">值</view>
										<view class="value" style="color: #299AEB;">{{value.val || '- -'}}</view>
									</view>
								</template>
								<template v-else>
									<view class="order-content-row">
										<view class="label">最小值</view><view class="value">{{value.minVal || '- -'}}</view>
									</view>
									<view class="order-content-row">
										<view class="label">最大值</view><view class="value">{{value.maxVal || '- -'}}</view>
									</view>
									<view class="order-content-row">
										<view class="label">平均值</view><view class="value">{{value.avgVal || '- -'}}</view>
									</view>
									<view class="order-content-row">
										<view class="label">排放</view><view class="value">{{value.emissionsVal || '- -'}}</view>
									</view>	
								</template>
								
							</view>
						</view>
					</view>
				</block>
			</view>
			<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
		</view>
		<uniDrawer ref="draw" :mask="true" mode='right' :width="250">
			<view style="height: 90upx;">&nbsp;</view>
			<view class="draw-panel">
				<view class="operation-panel" style="padding: 0px 20upx;">
					<view class="item-card">
						<view class="card-title">
							<uni-icons class="icon left" type="paperclip" size="20" color="#156dac"></uni-icons>
							<text class="content">显示类型</text>
							<uni-icons class="icon right" type="arrowdown" size="16" color="#666"></uni-icons>
						</view>
						<view class="operation-panel flex" style="padding: 20upx 0 0  0;">
							<view 
								class="item-btn mini auto" 
								:class="dataFlag === 1?'':'white'" 
								@click="changeDataFlag(1)" 
							>
								<text>恒值</text>
							</view>
							<view
								class="item-btn mini auto" 
								:class="dataFlag === 2?'':'white'" 
								@click="changeDataFlag(2)" 
							>
								<text>超标</text>
							</view>
						</view>
					</view>
					<view class="drawer-form">
						<view class="drawer-form-item">
							<view class="drawer-label"><text>开始时间</text></view>
							<view class="drawer-content">
								<TimeSelector
									ref="stime"
									class="ipt-ctl"
								    showType="dateToTime"
									@btnConfirm="(e)=>dateChange(e,'startDate')" 
								>
								    <text v-if="query.startDate">{{query.startDate}}</text>
									<text v-else style="color: grey;">请选择开始时间</text>
								</TimeSelector>
							</view>
						</view>
						<view class="drawer-form-item">
							<view class="drawer-label"><text>结束时间</text></view>
							<view class="drawer-content">
								<TimeSelector
									ref="etime"
									class="ipt-ctl"
								    showType="dateToTime"
									@btnConfirm="(e)=>dateChange(e,'endDate')" 
								>
								    <text v-if="query.endDate">{{query.endDate}}</text>
									<text v-else style="color: grey;">请选择结束时间</text>
								</TimeSelector>
							</view>
						</view>
						<view v-if="dataFlag === 1" class="drawer-form-item">
							<view class="drawer-label"><text>过滤恒值</text></view>
							<view class="drawer-content">
								<!-- <uni-easyinput class="ipt-ctl" type="number" v-model="query.duration" maxlength="8" placeholder="请输入报警时长" /> -->
								<switch :checked="query.change === 1" @change="switchChange" style="color: #007AFF;"/>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom-panel">
					<view class="item-btn lp" @click="handleQuery"><text>确定</text></view>
				</view>
			</view>
		</uniDrawer>
	</view>
</template>

<script>
	import {parseTime} from '@/common/util.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import TimeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
	
	const queryDz = '/dataQuery/realtime/changeData1'
	const queryCb = '/dataQuery/realtime/changeData3'
	
	export default {
		components:{
			uniLoadMore,
			uniIcons,
			uniDrawer,
			TimeSelector,
		},
		data() {
			return {
				last_id: '',
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				title: '因子数据',
				dataFlag: 1,
				query: {
					total: 0,
					page: 1,
					limit: 10,
					controlLevel: '',
					industryCategory: '',
					emissionType: '',
					alarmType: '',
					processingStatus: '',
					remove: '',
					process: '',
					duration: null,
					projectDepartmentId: null,
					enterpriseId: null,
					outletId: null,
					factorId: null,
					change: 0,
					startDate: '',
					endDate: ''
				},
				reload: false,
				listData: []
			}
		},
		onLoad(options){
			const {factorLibraryId,name,stime,etime,outletId,factorId} = options
			this.query.outletId = outletId
			this.query.factorId = factorId
			this.title = name + '因子数据'
			if(stime && etime){
				this.query.startDate = parseTime(stime, '{y}-{m}-{d} {h}:{i}:{s}'),
				this.query.endDate = parseTime(etime, '{y}-{m}-{d} {h}:{i}:{s}')
			}else{
				this.query.startDate = parseTime(new Date(), '{y}-{m}-{d}') + ' 00:00:00'
				this.query.endDate = parseTime(new Date(), '{y}-{m}-{d}') + ' 23:59:59'
			}
			this.getList();
		},
		onShow(){
			this.getList();
		},
		onPullDownRefresh() {
			this.last_id = '';
			this.listData =  []
			this.query.page = 1
			this.getList();
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			},100)
		},
		onReachBottom() {
			this.status = 'more';
			this.query.page = this.query.page + 1
			this.getList(true);
		},
		methods: {
			parseTime,
			handleQuery(){
				this.query.page = 1
				this.getList();
				this.$refs.draw.close()
			},
			getList(loadMore = false){
				this.status = 'loading';
				let c_url = queryDz
				if(this.dataFlag===2){
					c_url = queryCb
				}
				this.$api.request(c_url,{
					method: 'get',
					data: this.query
				}).then(res=>{
					if(res.success) {
						const data = res.data.data
						const {total,records} = data
						// console.log(records)
						if(records.length === 0 || total <= this.query.limit){
							this.status = ''
						}
						if(loadMore){
							this.listData = [...this.listData,...records]
						}else{
							this.listData  = records
						}
						this.last_id = this.listData[this.listData.length - 1];
						this.reload = false;
					}
				}).catch(()=>{
				})
			},
			pageback(){
				uni.navigateBack({
					delta: 1
				});
			},
			changeDataFlag(val){
				this.dataFlag = val
			},
			showDrawer(){
				this.$refs.draw.open()
			},
			dateChange(res,type){
				this.query[type] = res.key
			},
			switchChange(e){
				if(e.target.value){
					this.query.change = 1
				}else{
					this.query.change = 0
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	
	.page-content-list{
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		.content-list-cell{
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}
	.order-item{
		width: 750upx;
		background: #fff;
		padding: 20upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
		.order-item-content{
			margin-top: 30upx;
			.order-content-row{
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				font-size: 26upx;
				margin-bottom: 10upx;
				.order-btn{
					display: inline-block;
					background-color: #156dac;
					color: #fff;
					width: 95upx;
					height: 50upx;
					line-height: 50upx;
					text-align: center;
					font-size: 24upx;
					padding: 0;
					margin-left: 10upx;
				}
				.label{
					flex: 0 0 200upx;
					color: #5A5A5A;
					text-align: left;
					font-size: 26upx;
				}
				.value{
					flex: 1;
					color: #000;
					text-align: right;
					font-size: 26upx;
					&.text-left{
						text-align: left;
						padding-left: 20upx;
					}
				}
			}
			
		}
			
		.order-item-header{
			display: flex;
			align-items: center;
			.icon{
				margin-right: 10upx;
			}
			text{
				color: #333;
				font-size: 26upx;
				&.green{
					color:#2AD51D;
				}
				&.red{
					color: #E72B2B
				}
			}
			
		}
	}
</style>